<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: Application Menubar (YUI Library)</title>

                <!-- Standard reset and fonts -->

        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">

            

        <link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css">

         

        <!-- CSS for Menu -->

        <link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
 

        <!-- Page-specific styles -->
        <style type="text/css">

            body {
            
                background-color:#dfb8df;
            
            }


            /* Define a new style for each menu bar */

            div#mymenubar.yuimenubar {
            
                background:url(img/menubar_background.gif) left center;
                border:0px solid #ccc;
                border-bottom-width:1px;
            
            }

            div#mymenubar.yuimenubar li.yuimenubaritem {

                padding:4px 10px;
                border:none;

            }

            div#mymenubar.yuimenubar li.yuimenubaritem.first-of-type a {
            
                text-indent:-6em;
                background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
                width:2em;
                float:left;
                overflow:hidden;
                _margin-right:1em; /* IE 6 only */
            
            }

            div#mymenubar.yuimenubar div#yahoo.yuimenu li.yuimenuitem a {

                float:none;
            
            }

            div#mymenubar.yuimenubar .yuimenu {
            
                background:#edebeb;
            
            }

            div#mymenubar.yuimenubar .yuimenu li.yuimenuitem a {
            
                text-indent:0;
                background:none;
                width:auto;
                overflow:visible;
                _margin-right:auto; /* IE 6 only */
            
            }            

            div#mymenubar.yuimenubar li em.submenuindicator {

                height:1px;
                width:1px;
                margin:0;
            
            }
            
            div#mymenubar div.yuimenu li em.submenuindicator {

                height:8px;
                width:8px;
                margin:0 -16px 0 10px;
            
            }
        
        </style>

                <!-- Namespace source file -->

        <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>

        <!-- Dependency source files -->

        <script type="text/javascript" src="../../build/event/event.js"></script>
        <script type="text/javascript" src="../../build/dom/dom.js"></script>

            
        <script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
        <script type="text/javascript" src="../../build/animation/animation.js"></script>
        
        <!-- Container source file -->
        <script type="text/javascript" src="../../build/container/container.js"></script>

        <!-- Menu source file -->
        <script type="text/javascript" src="../../build/menu/menu.js"></script>

        <!-- Page-specific script -->
        <script type="text/javascript">

            YAHOO.example.onDOMReady = function(p_sType) {

                var aItemData = [

                    { text: "Yahoo!", submenu: { id:"yahoo", itemdata: [
                            
                            "About Yahoo!",
                            "YUI Team Info",
                            "Preferences"
                            
                        ] }
                        
                    },

                    { text:"File", submenu:{  id:"filemenu", itemdata:[

                            { text:"New File", helptext:"Ctrl + N" },
                            "New Folder",
                            { text:"Open", helptext:"Ctrl + O" },
                            { text:"Open With...", submenu: { id:"applications", itemdata: [
                                    "Application 1", 
                                    "Application 2", 
                                    "Application 3", 
                                    "Application 4"
                                ] } 
                            },
                            { text:"Print", helptext: "Ctrl + P" }

                        ] }
                    
                    },
                    
                    { text:"Edit", submenu:{ id: "editmenu", itemdata: [

                            [ 
                                { text:"Undo", helptext: "Ctrl + Z" },
                                { text:"Redo", helptext: "Ctrl + Y", disabled: true }
                            ],
                            
                            [
                                { text:"Cut", helptext: "Ctrl + X", disabled: true },
                                { text:"Copy", helptext: "Ctrl + C", disabled: true },
                                { text:"Paste", helptext: "Ctrl + V" },
                                { text:"Delete", helptext: "Del", disabled: true }
                            ],
                            
                            [ { text:"Select All", helptext: "Ctrl + A" } ],

                            [
                                { text:"Find", helptext: "Ctrl + F" },
                                { text:"Find Again", helptext: "Ctrl + G" }
                            ]
                    
                        ] }

                    },

                    "View",

                    "Favorites",

                    "Tools",

                    "Help",

                    { text:"Examples Home", url:"index.html" }

                ];


                var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", { lazyload: true, itemdata:aItemData });


                // Render the MenuBar instance and corresponding submenus

                oMenuBar.render(document.body);


                var oPanel = new YAHOO.widget.SimpleDialog(
                                    "exampleinfo", 
                                    { 
                                        constraintoviewport: true,
                                        fixedcenter:true,
                                        width:"400px",
                                        zIndex:1
                                    }
                                );
                
                
                oPanel.setHeader("Application Menubar Example");
                oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");

                oPanel.render(document.body);
              
                oPanel.show();

            };


            // Add a "load" handler for the window

            YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);

        </script>

    </head>
    <body>
    </body>
</html>